<template>
	<view class="comp-favorite-praise-item" v-if="itemData" @tap="handleToDetail">
		<view class="container-item">
			<view class="item-title-praise">
				<view class="item-title">
					<image class="icon-Q" src="/static/icon_question.png"></image>
					<view class="wrap-title">{{itemData.show_mid_table_remark_001}}</view>
				</view>
				<view class="box-praise" @tap.stop="handleLike">
					<image class="icon" :src="showIcon"></image>
					<view>{{itemData.show_save_data_005}}</view>
				</view>

			</view>
			<view class="item-content">{{itemData.show_mid_table_remark_002}}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed
	} from "vue"
	const props = defineProps({
		itemIdx:{
			type:Number,
			default:-1,
		},
		itemType: {
			type: String,
			default: 'favorite'
		},
		itemData: {
			type: Object,
			default: () => {
				return null
			}
		}
	})
	const emits=defineEmits(['onLike','onDetail'])
	const showIcon = computed(() => {
		if(props.itemData.show_save_data_003&&(props.itemData.show_save_data_003.is_online===0||props.itemData.show_save_data_003.is_online==='0')){
			return '/static/icon_praise_selected.png'
		}
		return '/static/like_unselected@3x.png'
	})
	const showCount=computed(()=>{
		// console.log(props.itemIdx,">>>>>>>>>>>>>>>>>>")
		if(props.itemData.show_save_data_005){
			return props.itemData.show_save_data_005;
		}
		return 0
	})
	
	const handleLike=()=>{
		emits('onLike',props.itemIdx)
	}
	const handleToDetail=()=>{
		emits('onDetail',props.itemIdx)
	}
	
</script>

<style lang="less" scoped>
	.comp-favorite-praise-item {
		position: relative;
		width: 100%;
		padding-left: 32rpx;
		padding-right: 32rpx;
		box-sizing: border-box;

		.container-item {
			position: relative;
			width: 100%;
			padding: 26rpx 32rpx 32rpx;
			background: #213343;
			border-radius: 40rpx;
			box-sizing: border-box;

			.item-title-praise {
				position: relative;
				width: 100%;
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.item-title {
					position: relative;
					flex: 1;
					display: flex;
					display: -webkit-flex;
					flex-direction: row;
					align-items: center;

					// .icon-Q {
					// 	position: relative;
					// 	width: 52rpx;
					// 	height: 52rpx;
					// 	background: rgba(255, 255, 255, 0.1);
					// 	border-radius: 50%;
					// 	overflow: hidden;

					// 	&::after {
					// 		position: absolute;
					// 		content: 'Q';
					// 		font-size: 36rpx;
					// 		// font-family: PingFang SC;
					// 		font-weight: 500;
					// 		color: #FFFFFF;
					// 		top: 50%;
					// 		left: 50%;
					// 		transform: translate(-50%, -50%);
					// 		-webkit-transform: translate(-50%, -50%);
					// 	}
					// }
					.icon-Q{
						position: relative;
						width: 52rpx;
						height: 52rpx;
						background: rgba(255,255,255,0.1);
						border-radius: 50%;
						overflow: hidden;
						
						// &::after{
						// 	position: absolute;
						// 	content: 'Q';
						// 	font-size: 36rpx;
						// 	// font-family: PingFang SC;
						// 	font-weight: 500;
						// 	color: #FFFFFF;
						// 	top:50%;
						// 	left:50%;
						// 	transform: translate(-50%,-50%);
						// 	-webkit-transform: translate(-50%,-50%);
						// }
					}

					.wrap-title {
						position: relative;
						flex: auto;
						margin-left: 15rpx;
						margin-right: 43rpx;
						width: 0;
						font-size: 30rpx;
						line-height: 30rpx;
						// font-family: PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.box-praise {
					position: relative;
					display: flex;
					display: -webkit-flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					font-size: 20rpx;
					// font-family: PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 20rpx;

					.icon {
						position: relative;
						width: 40rpx;
						height: 40rpx;
						box-sizing: border-box;
						margin-top: 6rpx;
					}
				}


			}

			.item-content {
				position: relative;
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				background: #182836;
				border: 1px solid rgba(255, 255, 255, 0.2);
				border-radius: 24rpx;
				padding-left: 29rpx;
				padding-right: 29rpx;
				box-sizing: border-box;
				margin-top: 28rpx;
				overflow: hidden;

				font-size: 30rpx;
				// font-family: PingFang SC;
				font-weight: 400;
				// color: #48C282;
				color:#00FFF6;
			}
		}

	}
</style>